import React from "react";
import GoBack from "@/components/TheGoBack";
import TheImage from "@/components/TheImage";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import "../../style/style.less";
import {
  apiGetProductDetails,
  apiProductInfoSkuPutaway,
} from "@/request/commodity";
import _ from "lodash";
import { Table } from "antd";

class Detail extends React.Component {
  state = {
    basicData: [],
    columns: [],
    dataSource: [],
    productTxt: "",
  };
  async componentDidMount() {
    await this.getData();
  }
  onShelf = (productSkuId, skuStatus) => {
    React.$confirm({
      title: "您确定上架该商品吗？",
      onOk: async () => {
        await apiProductInfoSkuPutaway({ productSkuId, skuStatus });
        await this.getData();
      },
    });
  };
  offShelf = (productSkuId, skuStatus) => {
    console.log(skuStatus, productSkuId);
    React.$confirm({
      title: "您确定下架该商品吗？",
      onOk: async () => {
        await apiProductInfoSkuPutaway({ productSkuId, skuStatus });
        await this.getData();
      },
    });
  };
  getData = async () => {
    const { productId } = this.props.match.params;
    let res = await apiGetProductDetails({ productId });
    if (res.code === 0 && res.data) {
      const { productInfo, skuInfo } = res.data;
      let basicData = [
        {
          value: productInfo.productClassifyName,
          text: "商品分类",
        },
        {
          value: productInfo.productName,
          text: "商品名称",
        },
        {
          value: <React.$Price price={productInfo.originalPrice || ""} />,
          text: "商品原价",
        },
        {
          value: <React.$Price price={productInfo.currentPrice || ""} />,
          text: "商品现价",
        },
        {
          value: (
            <div>
              <TheImage
                width={80}
                height={80}
                src={productInfo.productShowImages.split(",")[0]}
              />
            </div>
          ),
          text: "商品图片",
        },
      ];
      let dataSource = skuInfo.map((v, i) => {
        let obj = {};
        v.skuAttribute.forEach((j, k) => {
          obj[k] = j.value;
        });
        obj.materialId = v.materialId;
        obj.materialName = v.materialName;
        obj.skuOriginalPrice = <React.$Price price={v.skuOriginalPrice} />;
        obj.skuCurrentPrice = <React.$Price price={v.skuCurrentPrice} />;
        obj.stock = parseInt(v.stock).toLocaleString();
        obj.skuIntegral = parseInt(v.skuIntegral).toLocaleString();
        obj.propCodeArray = v.propCodeArray;
        obj.imageFile = <TheImage src={v.imageFile} width={80} height={80} />;
        obj.SKUId = v.SKUId;
        obj.skuStatus = v.skuStatus;
        return obj;
      });
      let columns = [];
      _.forEach(skuInfo[0].skuAttribute, (v, i) => {
        columns.push({
          title: v.key,
          dataIndex: i,
          key: i,
        });
      });
      columns = columns.concat([
        {
          title: "物料ID",
          dataIndex: "materialId",
          key: "materialId",
        },
        {
          title: "商品物料名称(仓库用 APP不显示)",
          dataIndex: "materialName",
          key: "materialName",
        },
        {
          title: "原价",
          dataIndex: "skuOriginalPrice",
          key: "skuOriginalPrice",
        },
        {
          title: "现价",
          dataIndex: "skuCurrentPrice",
          key: "skuCurrentPrice",
        },
        {
          title: "库存",
          dataIndex: "stock",
          key: "stock",
        },
        {
          title: "编码",
          dataIndex: "propCodeArray",
          key: "propCodeArray",
        },
        {
          title: "图片",
          dataIndex: "imageFile",
          key: "imageFile",
        },
        {
          title: "操作",
          render: (text, record) => {
            console.log(record);
            return (
              <div>
                {record.skuStatus == "N" && (
                  <TheButton
                    hasPermi={["commodity:sku:OnShelf"]}
                    onClick={() => this.onShelf(record.SKUId, "Y")}
                  >
                    上架
                  </TheButton>
                )}
                {record.skuStatus == "Y" && (
                  <TheButton
                    hasPermi={["commodity:sku:OnShelf"]}
                    onClick={() => this.offShelf(record.SKUId, "N")}
                  >
                    下架
                  </TheButton>
                )}
              </div>
            );
          },
        },
      ]);
      this.setState({
        columns,
        dataSource,
        basicData,
        productTxt: productInfo.productTxt,
      });
    }
  };
  render() {
    const { basicData, columns, dataSource, productTxt } = this.state;
    return (
      <div className="commodity-list-detail p-layout-box">
        <GoBack history={this.props.history} title={"商品详情"} />
        <div className="detail-content">
          <div className="commodity-card">
            <div className="title">基本信息</div>
            <div className="content basic">
              {basicData.map((v, i) => {
                return (
                  <div>
                    <p>{v.text}:</p>
                    <div>{v.value}</div>
                  </div>
                );
              })}
            </div>
          </div>
          <div className="commodity-card">
            <div className="title">商品规格信息</div>
            <div className="content">
              <Table
                columns={columns}
                dataSource={dataSource}
                pagination={false}
              />
            </div>
          </div>
          <div className="commodity-card">
            <div className="title">商品详情</div>
            <div className="content">
              <div dangerouslySetInnerHTML={{ __html: productTxt }} />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Detail;
